Skip to main content

App fullscreen elements

Modals, tooltips & other fullscreen elements will occupy only the screen space allocated by your app, not all user screen because they are executed inside of an iframe. There're multiple ways to show your conent if fullscreen:

Using components from @corva/ui library​

Some components from @corva/ui library will be opened in fullscreen, even though they are located withing app's iframe. Please use them when you want to display some content in fullscreen, to not be limited by app's iframe

  • Modal
  • Tooltip
  • Popup
  • Popover

Using special API provided to your DC app: setIsFullscreenModalMode​

There is a function called setIsFullscreenModalMode which allows your app to enter\exit the so called fullscreen modal mode. 

setIsFullscreenModalMode(isEnabled: boolean): Promise

What is this mode? In this mode your app is opened in fullscreen, but with transparent background - so it looks like nothing has changed, but your fullscreen elements in DC app will occupy the whole screen, because in fact the app will occupy the full screen using transparent background container.

Usage​

Just before you want to show your fullscreen element, you need to enable the app fullscreen mode. And after you close your element - you need to call the method again, to exit the app fullscreen mode

See the example below for more details

App.js
import { useState } from 'react';
import { Modal, Button } from '@corva/ui/components';

export function MyFancyDcApp({ setIsFullscreenModalMode }) {
  const [isModalOpened, setIsModalOpened] = useState(false);

  const openModal = async () => {
    await setIsFullscreenModalMode(true);

    setIsModalOpened(true);
  };

  const closeModal = () => {
    setIsModalOpened(true);

    setIsFullscreenModalMode(false);
  };

  return (
    <>
      <Button onClick={openModal}>Show the modal</Button>
      <Modal
        open={isModalOpened}
        title="Test modal title"
        onClose={closeModal}
        isCloseIconShowed
        actions={<Button onClick={closeModal}>Cancel</Button>}
      >
        <h1>Test modal content</h1>
      </Modal>
    </>
  );
}

Because of how it works under the hood, the execution order matters here

  • call await setIsFullscreenModalMode(true) before you want to open the modal
  • call setIsFullscreenModalMode(false) after you closed your modal

otherwise, you might see a slight layout jump when a modal opens\closes